import React, { useEffect } from 'react';
import { lateralView, clearCanvas } from '@/utils/canvas';

function Chart4({ list = [], name, guide }) {
  useEffect(() => {
    const arr4 = [
      ['画图技巧', 5, 4],
      ['书写技巧', 9, 5],
      ['剪贴技巧', 14, 5],
      ['抓握技巧', 19, 5],
    ];
    clearCanvas('view5');
    lateralView(guide.code, 'view5', list, `领域三：${name}侧面图`, name, null, false, arr4);
  }, [list]);

  return (
    <>
      <canvas
        width="1200"
        height="600"
        style={{ margin: '30px 0', width: '100%', border: '1px solid #ddd' }}
        id="view5"
      />
    </>
  );
}
export default Chart4;
